<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="sider.css">
    <style>
        html,
        body {
            height: 100%;
        }

        /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
        /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
        @font-face {
            font-family: "Thin";
            src: url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff2") format("woff2"),
                url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff") format("woff");
            /* src: url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff2") format("woff2"), */
            /* url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff") format("woff"); */
            font-display: swap;
        }

        /* webSite/assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff */
        /* webSite/assert/font/uGFLnLcckjCC/Z1eaFFZZPDjN.woff */
        body {
            background: #006666;
        }

        .container {
            background: url('./assert/img/bg3.png') no-repeat center;
            background-size: cover;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;

        }

        .container h1 {
            color: #d5950b;
            font-size: 120px;
            text-align: center;
            /* 更改字体 */
            font-family: "Thin", Arial, sans-serif;
            /* 使用新字体 */
            position: absolute;
            top: 10%;
            left: 10%;
            /* transform: translate(-50%, -50%); */
        }

        .container form h2 {
            color: #7e5908;
            font-size: 30px;
            text-align: center;
            /* 使用新字体 */
            position: absolute;
            top: 7%;
            left: 33%;
            /* transform: translate(-50%, -50%); */
        }

        .register {
            height: 14%;

            width: 50%;
        }

        form {
            background: orange;
            height: 40%;
            width: 30%;
            border-radius: 15px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;

        }

        .p {
            color: red;
            margin-left: 23.4%;
            display: inline-block;
        }

        .q {
            color: red;
            margin-left: 20%;
            display: inline-block;
        }

        form .formContainer {
            height: 75%;
            width: 100%;
            padding: 8% 10%;
        }

        form .formContainer .form-frame {
            margin-top: 5%;
            height: 100%;
            width: 100%;
            margin-left: -4%;
        }

        label {
            font-size: 18px;
            font-weight: bold;
        }

        input {
            text-align: left;
            margin: 2% 2%;
            border: 1px solid rgba(203, 197, 198, 0.03);
            border-radius: 5px;
        }

        .checkbox {
            margin-left: 31%;
            display: inline-block;
            width: 15px;
            height: 15px;
        }

        a {
            text-decoration: none;
            font-weight: bold;
        }

        .submit {
            display: inline-block;
            /* margin-top: 5%; */
            margin-left: 26%;
            background: #000;
            border: none;
            color: #FFF;
            height: 35px;
            width: 60%;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }

        .left,
        .right {
            position: absolute;
            bottom: 20px;
        }

        .left {
            left: 20px;
        }

        .right {
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>WelCome to the home of oranges</h1>
        <!-- form表单注册区域-->
        <form>
            <div class="formContainer">
                <h2>欢迎来到橙子之家</h2>

                <div class="form-frame">
                    <span class="p">*</span>
                    <label for="username">用户名</label>
                    <input type="text" name="" id="username" placeholder="请输入用户名" class="register"><br><br>

                    <span class="q">*</span>
                    <label for="pwd">登录密码</label>
                    <input type="password" name="" id="pwd" class="register" placeholder="请输入密码"><br><br>

                    <span class="q">*</span>
                    <label for="c_pwd">确认密码</label>
                    <input type="password" name="" id="c_pwd" class="register" placeholder="请再次输入密码"><br><br>
                </div>


                <input type="checkbox" class="checkbox" name="">
                <span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
                <br><br>
                <input type="submit" name="" value="同意以上协议并注册" class="submit" onclick="register(this)"><br>
                <a href="login.html" class="right">已有账号？开始登录</a>
            </div>
        </form>
    </div>
    <script>
        var checkbox = document.getElementsByClassName('checkbox');
        function register(btn) {
            if (checkbox[0].checked == true) {
                alert("注册成功！");
            }
            else {
                alert("请先阅读并同意《用户注册协议》！")
            }
        }
    </script>
</body>

</html>